<template>
  <transition :name="transitionName" appear>
    <div v-if="dialogVisible" class="custom-dialog" style="width:350px">
      <div class="header" :class="[size]" flex="main:justify cross:center">
        <span>{{ title }}</span>
        <button v-if="!!icon" class="btn" type="button" @click="$emit('close',false)"><i class="el-dialog__close el-icon" :class="[icon]" /></button>
      </div>
      <div class="body"><slot /></div>
    </div>
  </transition>
</template>

<script>
export default {
  model: {
    prop: 'dialogVisible',
    // 随便命名事件，对应下面$emit即可
    event: 'close'
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    title: {
      type: String,
      default: ''
    },
    transitionName: {
      type: String,
      default: 'fade-left'
    },
    icon: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>>
